<template>
  <div>
    <div class="shopcart">
        <div class="content">
          <div class="content-left" @click="showCa">
            <div class="logo-wrapper">
              <div class="logo" :class="{'highlight':totalCount>0}">
                <i class="icon-shopping_cart" :class="{'highlight':totalCount>0}">
                  购
                </i>
              </div>
              <div class="num" v-show="totalCount>0">{{totalCount}}</div>
            </div>
            <div class="price" :class="{'highlight':totalCount>0}">{{totalePrice}}元</div>
            <div class="desc">另需配送费￥{{deliveryprice}}</div>
          </div>
          <div class="content-right">
            <div class="pay" :class="payClass">
              {{payDesc}}
            </div>
          </div>
        </div>
        <div class="back"></div>
      </div>
    <div class="carts" v-show="showCarts">
      <div class="back" @click="showCa"></div>
      <div class="carts-header">
        <p class="carts-heads-name">已选商品</p>
        <div @click="showCa">
          <p class="carts-clear" @click="clearItem">
            清空</p>
        </div>
      </div>
      <ul class="cart-items">
        <li class="cart-item" v-for="(item,index) in foods" :key="index"  v-show="item.count > 0">
          <div class="cart-item-name">{{item.name}}</div>
          <div class="cart-item-right">
            <p class="cart-item-money">{{item.price * item.count}}</p>
            <div class="cart-item-num">
              <p class="down-item" @click="subnum(item)">-</p>
              <p class="num-item-cart">{{item.count}}</p>
              <p class="add-item" @click="Addnum(item)">+</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderButtom',
  props: {
    foods: {
      type: Array,
      default () {
        return [{
          'count': 10,
          'price': 5
        }]
      }
    },
    minprice: {
      type: Number,
      default: 0
    },
    deliveryprice: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showCarts: false
    }
  },
  watch: {
    foods () {
      console.log(this.foods, 3)
    }
  },
  computed: {
    totalePrice () {
      let total = 0
      this.foods.forEach((food) => {
        total += food.price * food.count
      })
      return total
    },
    totalCount () {
      let count = 0
      this.foods.forEach((food) => {
        count += food.count
      })
      return count
    },
    payDesc () {
      if (this.totalCount === 0) {
        return `${this.minprice}元起送`
      } else if (this.totalePrice < this.minprice) {
        let diff = this.minprice - this.totalePrice
        console.log(diff)
        return '还差￥' + diff + '元起送'
      } else {
        return '去结算'
      }
    },
    payClass () {
      if (this.totalePrice < this.minprice) {
        return 'not-enough'
      } else {
        return 'enough'
      }
    }
  },
  methods: {
    clearItem () {
      this.foods.forEach((food) => {
        food.count = null
      })
    },
    subnum (item) {
      if (item.count <= 0) {
        item.count = null
      } else {
        item.count -= 1
      }
    },
    Addnum (item) {
      item.count += 1
    },
    showCa () {
      this.showCarts = !this.showCarts
    }
  }
}
</script>

<style lang="stylus" scoped>
  .shopcart
    position fixed
    left 0
    bottom  0
    z-index 50
    width 100%
    height 48px
    .content
      display flex
      background #141d27
      .content-left
        flex 1
        .logo-wrapper
          display inline-block
          position relative
          top -10px
          margin 0 12px
          padding 6px
          width 56px
          height 56px
          box-sizing border-box
          vertical-align top
          border-radius 50%
          background #141d27
          .logo
            width 100%
            height 100%
            border-radius 50%
            text-align center
            background #2b343c
            &.highlight
              background rgb(0,160,220)
            .icon-shopping_cart
              line-height 44px
              font-size 24px
              color #80858a
              &.highlight
                color #fff
          .num
            position absolute
            top 0
            right 0
            width 24px
            height 16px
            line-height 16px
            text-align center
            border-radius 16px
            font-size 9px
            font-weight 700
            color #fff
            background rgb(240,20,20)
            box-shadow 0 4px 8px 0 rgba(0,0,0,0.4)
        .price
          display inline-block
          vertical-align top
          line-height 24px
          margin-top 12px
          padding-right 12px
          box-sizing border-box
          border-right 1px solid rgba(255,255,255,0.1)
          font-size 16px
          font-weight  700
          color #cacaca
          &.highlight
            color #fff
        .desc
          display inline-block
          vertical-align top
          line-height 24px
          margin 12px 0 0 12px
          color #eaeaea
          font-size 10px
      .content-right
        flex 0 0 105px
        width 105px
        .pay
          height 48px
          line-height 48px
          text-align center
          font-size 12px
          color #eaeaea
          font-weight 700
          background #7e8c8d
          &.not-enough
            background #7e8c8d
          &.enough
            background #00b43c
            color #fff
  .carts
    position fixed
    bottom 48px
    left  0
    width 100%
    .back
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index -1
    .carts-header
      display flex
      justify-content space-between
      align-items center
      font-size 0.35rem
      padding 0.2rem
      background-color: #0ff
    .cart-items
      position relative
      display flex
      flex-direction column
      padding 0.1rem 0.25rem
      background white
      .cart-item
        display flex
        flex-direction row
        justify-content space-between
        font-size 0.35rem
        padding-top 0.2rem
        .cart-item-name
          font-weight 400
          margin: auto 0
        .cart-item-right
          display flex
          flex-direction row
          width: 35%;
          justify-content space-between
          .cart-item-money
            color red
            font-size 0.4rem
            margin: auto 0
          .cart-item-num
            display flex
            flex-direction row
            width: 60%;
            justify-content space-around
            .down-item
              line-height 0.5rem
              text-align center
              font-size 0.5rem
              background aqua
              border-radius 50%
              width 33%
              color white
            .add-item
              line-height 0.5rem
              text-align center
              font-size 0.5rem
              background aqua
              border-radius 50%
              width 33%
              color white
              height: 96%;
            .num-item-cart
              font-size: 0.3rem;
              width: 0.4rem;
              text-align: center;
              margin: auto
</style>
